<template>
  <div class="main">
    <div class="privilege_manage">
      <el-button type="primary" size="mini" @click="privilege_manage">特权管理</el-button>
    </div>
    <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border highlight-current-row>
      <el-table-column align="center" label="会员类型" prop="typeDesp"></el-table-column>
      <el-table-column align="center" label="会员特权" prop="name">
        <template slot-scope="scope">
          <div class="privilege">
            <div class="privilege_item" v-for="(item,index) in scope.row.userPrivilegeItems">
              <img v-if="item.iconUrl" :src="item.iconUrl" class="avatar" style="height: 46px">
              <div class="title">{{item.title}}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" v-if="rightsButtons['edit'] || rightsButtons['goods']">
        <template slot-scope="scope">
          <el-button v-if="rightsButtons['edit']" type="primary" size="mini" @click="showEdit(scope.row)">编辑</el-button>
          <router-link v-if="rightsButtons['goods']"
            :to="{name: 'upgradeMakeMoneyMemberGoods', params: {id: scope.row.id}}">
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container" v-if="listTotal > 0">
      <el-pagination @current-change="handleCurrentChange" :current-page.sync="listQuery.pageIndex"
        :page-size="listQuery.pageSize" :total="listTotal" layout="total, prev, pager, next, jumper"></el-pagination>
    </div>
    <el-dialog class="privilege_manage_dialog" title="特权管理" :visible.sync="privilege_manage_flag" width="80%">
      <div class="formList" v-for="(item,index) in formData.arr" @click.once="chiose(index)">
        <el-form class="privilege_manage_form" :model="item" :rules="formRules" size="medium" ref="form" label-width="100px">
          <el-form-item label="标题:" prop="title">
            <el-input v-model="item.title" placeholder="请输入" maxlength="6"></el-input>
          </el-form-item>
          <el-form-item label="图标:" prop="iconUrl">
            <el-upload class="avatar-uploader" accept="image/*" :action="upladUrl" name="file" :show-file-list="false"
              :on-success="uploadSuccess" :before-upload="beforeUpload">
              <img v-if="item.iconUrl" :src="item.iconUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="跳转链接:" prop="url">
            <div class="jump_link">
              <el-input v-model="item.url" placeholder="输入链接地址"></el-input>
              <span>&nbsp;&nbsp;或&nbsp;&nbsp;</span>
              <el-input v-model="item.selectUrl" placeholder="筛选原生跳转地址"></el-input>
            </div>
          </el-form-item>
          <el-form-item label="排序:" prop="sort">
            <el-input v-model="item.sort" placeholder="输入整数越大越前面"></el-input>
          </el-form-item>
          <el-form-item prop="operator">
            <div class="operator">
              <el-button v-if="index == formData.arr.length - 1" type="primary">+添加</el-button>
              <el-button type="infor">-移除</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save(0)" :loading="btnLoading">保存</el-button>
        <el-button @click="privilege_manage_flag = false">取消</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="form.id ? '编辑' : '新建'" :visible.sync="showEditPop">
      <div class="edit">
        <div class="vipType">类型：{{editList.typeDesp}}</div>
        <el-checkbox-group v-model="checkList" class="checkList" @change="showEditCheckChange">
          <div class="checkItem" v-for="(item,index) in checkListAll" :key="index">
            <img v-if="item.iconUrl" :src="item.iconUrl" class="avatar" style="height: 30px">
            <el-checkbox :label="item.title"></el-checkbox>
          </div>
        </el-checkbox-group>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="save(1)" :loading="btnLoading">保存</el-button>
        <el-button @click="showEditPop = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  import {
    regexp
  } from '../../../utils/tools'
  export default {
    name: 'upgradeMakeMoneyList',
    data() {
      return {
        list: [],
        editList: {}, //选中的编辑对象
        checkIds: [], //编辑时的选中的id
        checkList: [], //编辑时的选中项
        checkListAll: [], //固有选项
        privilege_manage_flag: false, //特权管理panel显示状态
        editIndex: 0, //当前编辑对象
        formData: {
          arr: [{
            deleteFlag: 1, //是否删除:0:删除,1:正常
            iconUrl: '', //图标
            selectUrl: '', //筛选原生跳转地址
            sort: '', //排序
            title: '', //标题
            url: '' //跳转链接
          }]
        },
        listQuery: {
          pageIndex: 1,
          pageSize: 20,
          isPage: 1
        },
        listTotal: 0,
        listLoading: false,
        form: {},
        formRules: {
          name: [{
            required: true,
            message: '不能为空',
            trigger: 'change'
          }],
          title: [{
            required: true,
            message: '不能为空',
            trigger: 'change'
          }],
          iconUrl: [{
            required: true,
            message: '图标不能为空',
            trigger: 'change'
          }],
          money: [{
              required: true,
              message: '不能为空',
              trigger: 'change'
            },
            {
              pattern: regexp.money,
              message: '格式错误(至多保留两位小数)',
              trigger: 'change'
            }
          ],
          memberType: [{
            required: true,
            message: '请选择',
            trigger: 'change'
          }],
          sort: [{
              required: true,
              message: '不能为空',
              trigger: 'change'
            },
            {
              pattern: regexp.sort,
              message: '必须为1-999的正整数',
              trigger: 'change'
            }
          ]
        },
        showEditPop: false,
        btnLoading: false
      }
    },
    created() {
      this.getList();
    },
    methods: {
      showEditCheckChange(e) {
        let that = this
        this.checkIds = []
        for (let item in that.checkList) {
          for(let item_a in that.checkListAll) {
            if (that.checkListAll[item_a].title == that.checkList[item]) {
              this.checkIds.push(that.checkListAll[item_a].id)
            }
          }
        }
      },
      //选中编辑行
      chiose(index) {
        this.editIndex = index
      },
      uploadImg(e) {
        const file = e.target.files[0]
        console.log(file)
        this.picFileUpload(file, res => {
          console.log(res.filePath)
        })
      },
      privilege_manage() {
        this.privilege_manage_flag = true
      },
      // 获取列表
      getList() {
        this.request({
          url: '/bsnl-member/member/privilege',
          method: 'get',
        }).then(res => {
          if (res.status == 200) {
            this.list = res.data
            this.listLoading = false;
          }
        })
        //获取特权配置列表
        this.request({
          url: '/bsnl-member/member/privilege/config',
          method: 'get',
        }).then(res => {
          if (res.status == 200) {
            console.log(res.data)
            this.checkListAll = res.data
            this.formData.arr = res.data
          }
        })
      },
      showEdit(row) {
        this.editList = row
        this.checkList = []
        for (let item in row.userPrivilegeItems) {
          this.checkList.push(row.userPrivilegeItems[item].title)
        }
        //开启dialog
        this.showEditPop = true;
      },
      beforeUpload(file) {
        if (!/image/.test(file.type)) {
          this.$message.error('只能上传图片');
          return false;
        }
        if (file.size > 1024 * 1024) {
          this.$message.error('图片不能大于1M');
          return false;
        }
      },
      uploadSuccess(res) {
        console.log(res)
        this.formData.arr[this.editIndex].iconUrl = this.replaceImgUrl(res.filePath);
      },
      handleCurrentChange(val) {
        this.listQuery.pageIndex = val;
        this.getList();
      },
      save(type) {
        const that = this
        switch (type) {
          case 0: //特权管理
              this.request({
                url: '/bsnl-member/member/privilege/config',
                method: 'post',
                data: that.formData.arr,
              }).then(res => {
                if (res.status == 200) {
                  this.getList();
                  this.btnLoading = false;
                  this.showEditPop = false;
                  this.$message.success('保存成功');
                }
              })
            break
          case 1: //会员列表
            this.request({
              url: `/bsnl-member/member/privilege/${this.editList.id}`,
              method: 'post',
              params: {
                privilege: that.checkIds.join(',')
              },
            }).then(res => {
                if (res.status == 200) {
                  this.getList();
                  this.btnLoading = false;
                  this.showEditPop = false;
                  this.$message.success('保存成功');
                }
            }).catch((err) => {
              this.$message.error(err.message)
            })
            break
          default:
        }
      },
      couponDelete(index) {
        this.form.upgradeMakeMoneyCoupons.splice(index, 1)
      },
      chooseCoupon() {
        this.couponChoose({
          validFlag: true
        }, this.form.upgradeMakeMoneyCoupons).then(val => {
          this.form.upgradeMakeMoneyCoupons = val
        })
      }
    }
  }
</script>
<style lang="scss">
  .operator {
    display: flex;
  }
  .jump_link {
    display: flex;
  }

  @media screen and (min-width: 1435px) {
    .privilege_manage_form {
      display: flex;
    }
  }

  .privilege_manage {
    display: flex;
    justify-content: flex-end;
  }

  .checkList {
    display: flex;
  }

  .checkItem {
    position: relative;
    margin: 20px 10px;
  }

  .checkItem img {
    position: absolute;
    left: 20px;
    bottom: 0px;
  }

  .el-checkbox__label {
    padding-left: 40px !important;
  }

  .privilege {
    display: flex;
    flex-direction: row;
  }

  .privilege_item {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    .title {
      margin: 0 10px;
    }
  }

  .avatar-uploader {
    .el-upload {
      position: relative;
      width: 100px;
      height: 100px;
      line-height: 98px;
      text-align: center;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      overflow: hidden;
      box-sizing: border-box;
    }

  }

  .coupon_div {
    border: 1px solid #dcdfe6;
    min-height: 100px;

    .el-tag {
      margin-left: 10px;
    }
  }
</style>
